<template>
  <div>
    御剑乘风来,除魔天地间!==mytag1
    <hr />
    <button @click="change1" :class="{ active1: flag1 }">{{ text1}}</button>
    <button @click="change2" :class="{ active2: flag2 }">{{text2}}</button>
    <button @click="change3" :class="{ active3: flag3}">{{text3}}</button>
    <button @click="change4" :class="{ active4: flag4}">{{text4}}</button>
  </div>
</template>
<script>
export default {
  props: {
    text1: String,
    text2: String,
    text3: String,
    text4: String
  
  },
  name: '',
  data () {
    return {
      flag1: false,
      flag2: false,
      flag3: false,
      flag4: false

    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    change1 () {
      this.flag1 = !this.flag1
    },
    change2 () {
      this.flag2 = !this.flag2
    },
    change3 () {
      this.flag3 = !this.flag3
    },
    change4 () {
      this.flag4= !this.flag4
    }
  }
}
</script>
<style lang='less'  scoped>
button {
  // background-color: aqua;
  margin: 10px;
}
.active1 {
  background-color: #ecf4ff;
  border: 4px solid #ecf5ff;
}
.active2 {
  background-color: #67c23a;
  border: 4px solid #67c23a;
  border-radius: 5px;
}
.active3 {
  background-color: #e6a23c;
  border: 4px solid #e6a23c;
  border-radius: 10px;
}
.active4 {
  background-color: #f56c6c;
  border: 4px solid #f56c6c;
  border-radius: 20px;
}
</style>
